import React from 'react';

export default class ErrorBoundary extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      hasError: false,
      errorName: '',
    };
  }
  static getDerivedStateFromProps(props: any, state: any) {
    if (state.hasError && props.location && props.location.pathname !== state.errorName) {
      return {
        hasError: false,
      };
    }
    return false;
  }

  static getDerivedStateFromError(error: any) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return {
      hasError: true,
    };
  }

  componentDidCatch(error: any, info: any) {
    // 你同样可以将错误日志上报给服务器
    this.setState({
      errorName: this.props.location ? this.props.location.pathname : '渲染组件错误',
    });
  }

  render() {
    // if (this.state.hasError) {
    //   // 你可以自定义降级后的 UI 并渲染
    //   console.log(this);
    //   return (
    //     <>
    //       <h1>发生了意料之外的错误~~</h1>
    //     </>
    //   );
    // }
    return this.props.children;
  }
}
